<template>
  <div>
  <el-container class="container" v-loading="loading" element-loading-text="请稍后">
      <el-form class="login-form" model="adFrom">
        <div class="logo-item">
          <img src="../../../assets/logo_dark.png" class="logo-image">
          <span class="form-tips">推送广告</span>
        </div>
        <div class="avatar-box">
          <el-upload
            class="avatar-uploader"
            :action="this.$common.getApiUrl(this.$common.ELE_MONKEY_SERVER_URL.BASE, this.$common.ELE_MONKEY_API.UPLOAD_FILE)"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload">
            <img v-if="imageUrl" :style="{ backgroundImage: 'url(' + that.$common.getResourceUrl(that.adFrom.image) + ')' }" class="avatar">
            <div v-else class="upload-tips-box">
              <i class="el-icon-plus avatar-uploader-icon"></i>
            </div>
          </el-upload>
        </div>
        <el-form-item label="竞价" style="margin-left: 10px">
          <el-input v-model="adFrom.price" prefix-icon="el-icon-arrow-right" style="width: 90%"></el-input>
        </el-form-item>
        <el-form-item class="btn-submit">
          <el-button type="primary" class="register-btn" icon="el-icon-check" @click="pushad">提交</el-button>
        </el-form-item>
      </el-form>
  </el-container>
  </div>
</template>

<script>
export default {
  name: 'AdPush',
  data () {
    return {
      that: this,
      adFrom: {
        price: '',
        image: '',
        storeId: this.$store.state.store.id
      },
      imageUrl: '',
      loading: false
    }
  },
  methods: {
    pushad () {
      this.loading = true
      this.$alert(this.adFrom)
      this.$merchantAPI.ad_push(this.adFrom).then((params) => {
        this.loading = false
        this.adFrom = {}
        this.$alert(params.message)
      }).catch((params) => {
        this.loading = false
        this.adFrom = {}
        this.$alert(params.message)
      })
    },
    handleAvatarSuccess (res, file) {
      this.adFrom.image = res
      this.imageUrl = URL.createObjectURL(file.raw)
    },
    beforeAvatarUpload (file) {
      const isJPG = file.type === 'image/jpeg' || file.type === 'image/png'
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG / PNG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
      return isJPG && isLt2M
    }
  }
}
</script>

<style scoped>
  .container {
    display: flex;
    align-items: center;
    justify-content: center;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
  }
  .login-form {
    width: 900px;
    padding: 50px 80px;
    border-radius: 10px;
    background-color: white;
  }
  .el-form-item {
    margin-bottom: 14px !important;
  }
  .login-submit-btn, .register-btn {
    width: 100%;
  }
  .register-btn {
    margin-top: 14px;
  }
  .logo-item {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 28px;
  }
  .logo-image {
    width: 240px;
  }
  .form-tips {
    font-size: 20px;
    margin-left: 15px;
    letter-spacing: 3px;
    color: rgb(13, 130, 255);
  }

  .avatar-uploader {
    width: 800px;
    height: 200px;
    border: 2px solid rgba(0, 0, 0, 0.35);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader:hover {
    border-color: #f3b274;
  }
  .avatar-uploader-icon {
    font-size: 22px;
    width: 80px;
    text-align: center;
  }
  .avatar-box {
    width: 100%;
    margin: 22px 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .avatar {
    width: 800px;
    height: 200px;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    box-sizing: border-box;
    display: block;
  }
  .upload-tips-box {
    width: 800px;
    height: 200px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #8c939d;
  }
  a {
    text-decoration: none;
    color: #a2a2a2;
  }
  .form-footer {
    margin-top: 22px;
    display: flex;
    justify-content: space-between;
    font-size: 14px;
  }
  .btn-submit{
    width: 810px;
    margin-left: 5%;
  }
</style>
